<div th:fragment="catesidebar" class="pb-sidebar">

    <div id="catalog" class="catalog-sticky-left" style="left: 5vw; max-height: 75vh;">
        <div class="catalog-title"><h3>目录</h3></div>
        <ul id="catesiderbar">

        </ul>
      </div>

 <style>
     #catalog, #catalog .catalog-title {
     background-color: #fff;

     min-height: 71.982px;
     max-height: 550px;
     width: 15.5vw;
     font-size: 14px;
     overflow-y: scroll；;
     overflow-x: hidden;
     word-wrap: nowrap;
     text-overflow: ellipsis;
     -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
     box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
     border-radius: 2px;
     margin-bottom: 10px;
     color: #333;
     z-index: 20;
     }

     .catalog-active {
         background: #FFB3CC;
         padding: 5.4px;
         border-radius: 3px;
         -webkit-transition: background .4s;
         transition: background .4s;
         color: #fff;
     }

 </style>

    <script>


        $(function () {
                showCate();
            $("#catesiderbar li").click(function() {
                $(this).siblings('li').removeClass('catalog-active');  		// 删除其他兄弟元素的样式
                $(this).addClass('catalog-active');                            // 添加当前元素的样式
            });
            }
        );


        function showCate() {
            var tmp = "";
            $($(".article-body").find('h2')).each(function(){
                  var contents = $(this).text();
                  $(this).attr("id",contents);
                    tmp+='<li class="h2-list"><a href="#'+contents+'">'+contents+'</a></li>'
            });

            $('#catesiderbar').html(tmp);
        }

    </script>

</div>


